<!-- 教室管理 -->

<template>
  <div>
    <div class="add-button">
      <el-button type="primary" style="width: 15%;" @click="addRoom()">添加教室</el-button>
    </div>
    <!-- 数据显示 -->
    <el-table :data="classroomData" size="mini" :stripe="true" :highlight-current-row="true">
      <el-table-column label="序号" type="selection"></el-table-column>
      <el-table-column prop="classroomNo" label="教室编号"></el-table-column>
      <el-table-column prop="classroomName" label="教室名"></el-table-column>
      <el-table-column prop="teachbuildNo" label="所属教学楼"></el-table-column>
      <el-table-column prop="capacity" label="容量"></el-table-column>
      <el-table-column prop="remark" label="备注"></el-table-column>
      <el-table-column prop="operation" label="操作">
        <template #default="scope">
          <el-button type="danger" size="mini" @click="deleteById(scope.$index, scope.row)">删除</el-button>
          <el-button type="primary" size="mini" @click="editById(scope.$index, scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹出表单编辑教室 -->
    <el-dialog v-model="visibleForm">
      <el-form :model="editFormData" ref="editFormDataRef" label-position="left" label-width="80px" :rules="editFormRules">
        <el-form-item label="编号" prop="classroomNo">
          <el-input v-model="editFormData.classroomNo" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="classroomName">
          <el-input v-model="editFormData.classroomName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所在楼栋" prop="teachbuildNo">
          <el-input v-model="editFormData.teachbuildNo" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="容量" prop="capacity">
          <el-input v-model="editFormData.capacity" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label=" 备注" prop="remark">
          <el-input v-model="editFormData.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="visibleForm = false">取 消</el-button>
        <el-button type="primary" @click="commit()">提 交</el-button>
      </template>
    </el-dialog>

    <!-- 分页 -->
    <div class="footer-button">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page"
        :page-size="pageSize" layout="total, prev, pager, next" :total="total"></el-pagination>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
import {ElMessage} from "element-plus";
const { proxy } = getCurrentInstance();

const classroomData = ref([])
const page = ref(1)
const pageSize = ref(10)
const total = ref(0)
const type = ref(1)
const visibleForm = ref(false)
const editFormData = ref({})
const editFormRules = reactive({
  classroomNo: [
    { required: true, message: '请输入教室编号', trigger: 'blur' },
  ],
  classroomName: [
    { required: true, message: '请输入教室名称', trigger: 'blur' },
  ],
  teachbuildNo: [
    { required: true, message: '请输入所在教学楼', trigger: 'blur' },
  ],
  capacity: [
    { required: true, message: '请输入教教室容量', trigger: 'blur' },
  ]
})

onMounted(() => {
  allClassroom()
})

const addRoom = () => {
  editFormData.value = {}
  visibleForm.value = true
  type.value = 2
}
const validateForm = () => {
  return new Promise((resolve) => {
    proxy.$refs.editFormDataRef.validate((valid) => {
      resolve(valid);
    });
  });
};
const commit =async () => {
  const valid = await validateForm();
  if (!valid) {
    ElMessage.error('请输入对应参数');
    return
  }
  if (type.value === 1) {
    modifyClassroom(editFormData.value)
  } else {
    addClassroom(editFormData.value)
  }
}

const deleteById = (index, row) => {
  deleteClassroomById(row.id)
}

const editById = (index, row) => {
  type.value = 1
  editFormData.value = Object.assign({}, row)
  visibleForm.value = true
}

const handleSizeChange = () => { }

const handleCurrentChange = (v) => {
  page.value = v;
  allClassroom()
}

/**
 * 添加教室
 */
const addClassroom = async (modifyData) => {
  await proxy.$api.addClassroom(modifyData);
  ElMessage({
    message: "添加成功",
    type: "success"
  })
  allClassroom()
  visibleForm.value = false
}

/**
 * 根据ID更新教室
 */
const modifyClassroom = async (modifyData) => {

  await proxy.$api.modifyClassroom(modifyData);
  ElMessage({
    message: "更新成功",
    type: "success"
  })
  allClassroom()
  visibleForm.value = false
}

/**
 * 根据ID删除教室
 */
const deleteClassroomById = async (id) => {
  await proxy.$api.deleteClassroomById(id);
  allClassroom();
  ElMessage({
    message: '删除成功',
    type: 'success'
  })
}

// 获取所有教室，带分页
const allClassroom = async () => {
  const result = await proxy.$api.allClassroom(page.value);
  console.log(result);
  classroomData.value = result.records;
  total.value = result.total;
}
</script>

<style lang="less" scoped>
.footer-button {
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
}


.add-button {
  margin-bottom: 5px;
  text-align: left;
}
</style>